<template>
  <div class="procedurepage">
    <div class="promain">
      <div class="up_procedure">
        <div class="title">1.上传程序</div>
        <div class="updataBox">
          <div class="updataMain">
            <el-form 
              :model="ruleForm" 
              :rules="rules" 
              ref="ruleForm" 
              label-width="100px" 
              class="demo-ruleForm">
              <el-form-item label="程序类型：" prop="resource"  >
                <el-radio-group v-model="ruleForm.resource" disabled>
                  <el-radio label="1" >塑造程序</el-radio>
                  <el-radio label="2">取证程序</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="程序名称：" prop="name">
                <el-input clearable v-model.trim="ruleForm.name" disabled ></el-input>
                <span style="color:#999">*命名规则：类型-团队名-程序自定义名称</span>
              </el-form-item>
              <el-form-item label="版本号：" prop="version">
                <el-input clearable v-model.trim="ruleForm.version"  placeholder='例如:V1.0.0' disabled ></el-input>
              </el-form-item>
              <el-form-item label="团队：" prop="team">
                <el-input clearable v-model.trim="ruleForm.team" placeholder='例如:中科大网安学院刘斌老师团队' disabled ></el-input>
              </el-form-item>
              <el-form-item label="程序端口：" prop="procedure">
                <el-input clearable v-model.number="ruleForm.procedure" placeholder="请输入接口号：1000~65000" disabled ></el-input>
              </el-form-item>
              <el-form-item label="程序IP：" prop="callInter">
                <el-input clearable v-model.trim="ruleForm.callInter" placeholder='请输入' disabled ></el-input>
              </el-form-item>
              
              <el-form-item label="描述：" prop="describe">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 10}"
                  placeholder="请输入内容"
                  maxlength="200"
                  show-word-limit
                  v-model="ruleForm.describe" 
                  disabled >
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          
        </div>
      </div>

      <div style="marginLeft:50px">
        <div class="title title2">2.程序参数设置</div>
        <div class="radioBox">
          <div class="radioSet">
            <el-form 
              :model="radioForm" 
              ref="radioItem" 
              label-width="100px" 
              class="demo-ruleForm">
              <el-form-item 
                v-for="(item,index) in radioForm.radioItem" :key="index" 
                :label="'参数'+ (index + 1) + ':'" >
                <el-radio-group   v-model="item.radio" disabled>
                  <el-radio label="1">视频</el-radio>
                  <el-radio label="2">音频</el-radio>
                  <el-radio label="3">图片</el-radio>
                </el-radio-group>
              </el-form-item>
              
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="create">
      <el-button  @click="back" class="bac">返回</el-button>
    </div>
    
  </div>
</template>

<script>
import lines from '../../../components/lines.vue'
import { getProgramById } from '../../../api/index'
export default {
  data(){
      var checkName = (rule, value, callback) => {
        var nameRule = /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/ 
        if (!value) {
          callback(new Error('程序名称不能为空'));
        }else if(value.length > 50){
          callback(new Error('程序名称长度限制50个汉字'));
        }else if(!nameRule.test(value)){
          callback(new Error('程序名称由中文、英文、数字、下划线组成，不支持特殊字符'));
        }else{
          callback()
        }
      };
      var checkVersion = (rule, value, callback) => {
        var versionRule = /^(V)([0-9]\d|[0-9])(.([0-9]\d|\d)){2}$/
        if (!value) {
          callback(new Error('版本号不能为空'));
        }else if(value.length >= 10){
          callback(new Error('版本号长度应小于10个字符'));
        }else if(!versionRule.test(value)){
           callback(new Error('版本号由V+数字.数字组成,例如：V1.0.0'));
        }else{
          callback()
        }
      };
      var checkTeam = (rule, value, callback) => {
        var teamRule = /^[\u4e00-\u9fa5]+$/;
        if (!value) {
           callback(new Error('团队不能为空'));
        }else if(value.length >= 50){
           callback(new Error('团队长度应小于50个字符'));
        }else{
          callback()
        }
        // else if(!teamRule.test(value)){
        //    callback(new Error('团队必须为汉字'));
        // }
      };
      var checkProcedure = (rule, value, callback) => {
        if (!value) {
           callback(new Error('程序接口不能为空'));
        }else if(typeof(value) != "number"){
           callback(new Error('程序接口必须为数字'));
        }else if(!(value >= 1000 && value <= 65000) ){
           callback(new Error('程序接口应在1000~65000之间'));
        }else{
          callback()
        }
      };
      var checkCallInter = (rule, value, callback) => {
        var nameRule = /^[a-zA-Z0-9]+$/ 
        if (!value) {
           callback(new Error('程序IP不能为空'));
        }else if(value.length > 30){
           callback(new Error('程序IP长度不得超过30'));
        }else{
          callback()
        }
      };
      var checkDescribe = (rule, value, callback) => {
        if (!value) {
           callback(new Error('描述不能为空'));
        }else if(value.length > 200){
           callback(new Error('描述长度应小于200'));
        }else{
          callback()
        }
      };
      
      return{
        id:'2f52884c7b9649e2bfa3aa11b3b26a92',
        ruleForm: {
          resource: '',
          name:'',
          version:'',
          team:'',
          procedure:'',
          callInter:'',
          describe:'',
        },
        radioForm:{
          radioItem:[{
            radio:'1',
          }]
        },
        rules: {
          resource: [
            { required: true, message: '请选择程序类型', trigger: 'change' }
          ],
          name:[{
            validator: checkName, trigger: 'blur',required: true,
          }],
          version:[{
            validator: checkVersion, trigger: 'blur',required: true,
          }],
          team:[{
            validator: checkTeam, trigger: 'blur',required: true, 
          }],
          procedure:[{
            validator: checkProcedure, trigger: 'blur',required: true, 
          }],
          callInter:[{
            validator: checkCallInter, trigger: 'blur',required: true
          }],
          describe:[{
            validator: checkDescribe, trigger: 'blur',required: true
          }],
        }
      }
  },
  components:{
    lines
  },
  mounted(){
    this.init()
  },
  methods:{
    init(){
      let id = this.$route.query.id
      let params = {id}
      getProgramById(params).then(res=>{
        if(res.data.message == "success"){
          let re = res.data.data
          // callInterface: null
          // createTime: "2021-10-26T15:25:12"
          // description: "测试描述"
          // id: "2f52884c7b9649e2bfa3aa11b3b26a92"
          // programIp: "100"
          // programName: "测试"
          // programParameters1: 1
          // programParameters2: 3
          // programParameters3: 2
          // programParameters4: null
          // programPort: "15000"
          // programType: 2
          // status: 1
          // team: "测试"
          // updateTime: "2021-10-26T15:52:19"
          // versionNumber: "V1.0.0"

          // ruleForm: {
          //   resource: '',
          //   name:'',
          //   version:'',
          //   team:'',
          //   procedure:'',
          //   callInter:'',
          //   describe:'',
          // },
          this.ruleForm.resource = String(re.programType) 
          this.ruleForm.name = re.programName
          this.ruleForm.version = re.versionNumber
          this.ruleForm.team = re.team
          this.ruleForm.procedure = Number(re.programPort) 
          this.ruleForm.callInter = re.programIp
          this.ruleForm.describe = re.description

          if(re.programParameters1 && re.programParameters1 != null){
            this.radioForm.radioItem[0].radio = String(re.programParameters1) 
          }
          if(re.programParameters2 && re.programParameters2 != null){
            this.radioForm.radioItem.push({radio: String(re.programParameters2)})
          }
          if(re.programParameters3 && re.programParameters3 != null){
            this.radioForm.radioItem.push({radio: String(re.programParameters3)})
          }
          if(re.programParameters4 && re.programParameters4 != null){
            this.radioForm.radioItem.push({radio: String(re.programParameters4)})
          }

          // radioForm:{
          //   radioItem:[{
          //     radio:'1',
          //   }]
          // }
          
        }
      })
    },
    back(){
      this.$router.push('/home/procedure')
    }
    
  }

}
</script>

<style lang='less' scoped>
.procedurepage{
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  .promain{
    height: 716px;
    display: flex;
    background-color: #282C41;
    /deep/.el-radio {
      color: #fff;
    }
    /deep/.el-radio__input.is-checked+.el-radio__label {
        color: #fff;
    }
    /deep/ .el-radio__input.is-disabled.is-checked .el-radio__inner {
      background-color: #409EFF; 
      border-color: #409EFF;
    }
    .title{
      background: linear-gradient(270deg, #2B5269 0%, #2B6A82 100%);
      color: #fff;
      width: 200px;
      height: 37px;
      margin-left: 38px;
      margin-top: 16px;
      line-height: 37px;
      padding-left: 10px;
      box-sizing: border-box;
    }
    .title2{
      margin-left: 0;
    }
    .up_procedure{
      .updataBox{
        width: 500px;
        margin-left: 90px;
        .updataMain{
          width: 500px;
          /deep/.el-form-item__label {
            color: #fff;
          }
          /deep/.el-input__inner {
              background-color: #4F5367;
              border-radius: 2px;
              border: 1px solid #7A7F8E;
              color: #fff;
              height: 30px;
              line-height: 30px;
              padding: 0 15px;
              width: 400px;
          }
          /deep/.el-textarea__inner {
              width: 400px;
              display: block;
              color: #fff;
              background-color: #4F5367;
              border: 1px solid #7A7F8E;
              border-radius: 2px;
          }
          /deep/.el-textarea .el-input__count{
            background-color: #4F5367;
          }
        }
      }
    }
  }
  
  .radioBox{
    width: 450px;
    .radioSet{
      width: 450px;
      /deep/.el-form-item__label {
        color: #fff;
      }
      .add{
        width: 28px;
        height: 28px;
        background: #234056;
        border: 1px solid #04D4FF;
        color: #04D4FF;
        border-radius: 2px;
        padding: 0;
        margin-left: 20px;
      }
      .delete{
        width: 28px;
        height: 28px;
        background: #282C41;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 2px;
        padding: 0;
        margin-left: 20px;
      }
    }
  }
  .footBottom{
    padding-left: 100px;
  }

  .create{
    position: fixed;
    width: calc(100% - 200px);
    height: 50px;
    background-color: #282C41;
    bottom: 0;
    left: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 50px;
    box-sizing: border-box;
    .bac{
      background-color: transparent;
      border: 1px solid #fff;
      color: #fff;
      border-radius: 2px;
      width: 122px;
    }
  }
}
</style>